<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="left">
            <span style="font-family:'FontAwesome';font-weight:400;"></span>
            <span style="font-family:'Arial Normal', 'Arial';font-weight:400;font-size:12px;"></span>
            <span style="font-family:'微软雅黑';font-weight:400;font-size:18px;">添加/修改规格</span>
          </div>
          <div class="right">
            <el-button size="small" @click="Return" style="font: 15px">返回</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="230px"
      class="demo-ruleForm"
    >
      <el-form-item label="规格名称 :" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="规格参数组 :" prop="templateId">
        <div class="cenRight">
          <el-select v-model="ruleForm.templateId" placeholder="请选择规格参数组" width="100px">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="该属性的录入方式 :" prop="ways">
        <div class="cenRight">
          <p style="text-align: left; width:100%;">
            <el-radio v-model="radio1" label="1" @click="show1">手工录入</el-radio>
            <el-radio v-model="radio1" label="2" @click="show2">从下面的列表中选择（一行代表一个可选值）</el-radio>
          </p>
        </div>
      </el-form-item>
      <el-form-item label="属性值可选值列表 :" prop="options">
        <el-input v-model="ruleForm.options"></el-input>
      </el-form-item>
      <el-form-item label="是否支持手动新增 :" prop="handAdd">
        <div class="cenRight">
          <el-radio v-model="radio2" label="1">是</el-radio>
          <el-radio v-model="radio2" label="2">否</el-radio>
        </div>
      </el-form-item>
      <el-form-item label="规格排序 :" prop="seq">
        <el-input v-model="ruleForm.seq"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm(ruleForm)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import specApi from "@/api/goods/spec";
import templateApi from "@/api/goods/template";
export default {
  data() {
    return {
      options: [],
      showHand: true,
      showSelect: false,
      radio1: "1",
      radio2: "1",
      id: "",
      ruleForm: {},
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }]
      }
    };
  },
  created() {
    templateApi.findAll().then(response => {
      const resp = response.data;
      this.options = resp.data;
    });
    console.log("id是:", this.$route.query.id);
    const id = this.$route.query.id;
    if (id != null) {
      specApi.findById(id).then(response => {
        const resp = response.data;
        // console.log("根据id查询:", resp.data);
        this.ruleForm = resp.data;
      });
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var a = this.$route.query.id;
      var navname = a == 1 ? "添加规格" : "修改规格";
    },
       submitForm(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          if (this.$route.query.id != null) {
            specApi.updateById(this.ruleForm).then(response => {
              const resp = response.data;
              if (resp.code == 0) {
                this.$router.push({
                  path: "/goods/formatList"
                });
                this.dialogFormVisible = false; // 关闭窗口
                this.$message({
                  message: "编辑成功",
                  type: "success"
                });
              } else {
                this.$message({
                  message: resp.msg,
                  type: "warning"
                });
              }
            });
          } else {
            specApi.add(this.ruleForm).then(response => {
              const resp = response.data;
              if (resp.code == 0) {
                this.$router.push({
                  path: "/goods/formatList"
                });
                this.dialogFormVisible = false; // 关闭窗口
                this.$message({
                  message: "新增成功",
                  type: "success"
                });
              } else {
                this.$message({
                  message: resp.msg,
                  type: "warning"
                });
              }
            });
          }
        }
      });
    },
    resetForm(ruleForm) {
      this.$refs[ruleForm].resetFields();
    },
    Return() {
      this.$router.go(-1);
    },
    show1() {
      this.showSelect = !this.showSelect;
      this.showHand = !this.showSelect;
    },
    show2() {
      this.showHand = !this.showHand;
      this.showSelect = !this.showSelect;
    }
  }
};
</script>
<style scoped>
.el-form-item {
  float: left;
  width: 100%;
  text-align: right;
}
.el-select {
  float: left;
}
.el-radio {
  float: left;
}
.el-input {
  float: left;
  text-align: left;
  width: 45%;
}
.cenRight {
  float: left;
  text-align: center;
  width: 700px;
}
.demo-ruleForm {
  text-align: center;
}
.el-row {
  margin-bottom: 20px;
  width: 100%;
}
.el-col {
  border-radius: 4px;
  height: 40px;
}
.bg-purple-dark {
  background: #a5b1c2;
}
.left {
  float: left;
}
.right {
  float: right;
  text-align: right;
}
</style>
